{extend name="public/base" /}
{block name="title"}文章访问统计{/block}
{block name="css"}
<!-- ladda   -->
<link href="__PUBLIC__/static/inspinia/css/plugins/ladda/ladda-themeless.min.css" rel="stylesheet">
<link rel="stylesheet" href="__PUBLIC__/static/inspinia/css/plugins/datapicker/bootstrap-datetimepicker.min.css">
{/block}

{block name="main"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>文章访问统计 </h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-wrench"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="#"></a></li>
                    </ul>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content" style="padding:10px">
                <div class="col-lg-2 col-md-2 m-b-xs ">
                    <div class="form-group">
                        {notempty name='count'}
                        <button class="btn btn-default btn-sm">浏览量：<span
                                class="badge badge-info">{$count}</span></button>
                        {/notempty}
                    </div>
                </div>
                <div class="col-lg-10 col-md-10 text-right">
                    <form method="get" role="form" class="form-inline">
                        <div class="form-group">
                            <input type="text" class="form-datetime form-control" placeholder="起始日期" id="queryDate"
                                name="startTime" value="{$Think.get.startTime |default=$startTime}">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-datetime form-control" placeholder="终止日期" name="endTime"
                                value="{$Think.get.endTime |default=$endTime}">
                        </div>
                        <button type="submit" class="btn btn-primary" style="margin-bottom: 0px">查找</button>
                    </form>
                </div>
                <div class="row col-lg-12 m-t-md">
                    <div class="pull-right">
                        <div class="btn-group">
                            <button type="button" class="btn btn-xs btn-success btn-tab"
                                data-action="{:url('article/echartShow',['id'=>$id,'start'=>$startTimestamp,'end'=>$endTimestamp])}">
                                报表
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="flot-chart">
                            <div class="flot-chart-content" id="flot-readcount-chart"></div>
                        </div>
                    </div>
                    <div class="col-lg-12">

                    </div>
                    <div class="col-lg-12">
                        <div class="table-responsive">
                            <table class="table table-hover table-striped table-border">
                                <thead>
                                    <tr>
                                        <!--<th><input type="checkbox" class="i-checks ajax-check-all"></th>-->
                                        <th>查看时间</th>
                                        <th>查看来源</th>
                                    </tr>
                                </thead>
                                <tbody>

                                    {empty name="list"}
                                    <tr>
                                        <td colspan="8">暂无数据</td>
                                    </tr>
                                    {else/}
                                    {volist name="list" id="vo"}
                                    <tr>
                                        <td>{$vo.view_time}</td>
                                        <td><span title="{$vo.ip}">{$vo.ip|ip_to_address=###,
                                                'province,city'}({$vo.meta_value})</span>
                                        </td>
                                    </tr>
                                    {/volist}
                                    {/empty}

                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="9" class="footable-visible">{$pages|raw}</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<!-- Ladda -->
<script src="__PUBLIC__/static/inspinia/js/plugins/ladda/spin.min.js"></script>
<script src="__PUBLIC__/static/inspinia/js/plugins/ladda/ladda.min.js"></script>
<script src="__PUBLIC__/static/inspinia/js/plugins/ladda/ladda.jquery.min.js"></script>
<script src="__PUBLIC__/static/inspinia/js/plugins/datapicker/bootstrap-datetimepicker.min.js"></script>
<script src="__PUBLIC__/static/inspinia/js/plugins/datapicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>

<script src="__PUBLIC__/static/inspinia/js/plugins/clipboard/clipboard.min.js"></script>

<!-- echarts -->
<script src="__PUBLIC__/static/admin/js/echarts.min.js" type="text/javascript"></script>
<script>
    var clipboard = new Clipboard('#btnCopy');

    $(document).ready(function () {
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    animation: false,
                    label: {
                        backgroundColor: '#ccc',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        shadowBlur: 0,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        textStyle: {
                            color: '#222'
                        }
                    }
                },
                formatter: function (params) {
                    return params[0].name + params[0].seriesName + ': ' + params[0].value;
                }
            },
            grid: {
                top: 20,
                right: 20,
                bottom: 40,
                left: 40,
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '文章查看量',
                data: [],
                type: 'bar',
                barMaxWidth: 60
            }]
        };

        var myChart = echarts.init($('#flot-readcount-chart').get(0), 'light');
        myChart.setOption(option);

        //自适应宽度
        window.addEventListener("resize", function () {
            myChart.resize();
        });


        $(".btn-tab").click(function (e) {
            $(".btn-tab").removeClass('active');
            $(this).addClass('active');

            var url = $(this).data('action');
            myChart.showLoading();
            $.getJSON(url, [1522281600, 1523404800], function (json) {
                myChart.hideLoading();
                // admin.log(json);
                if (json.code != 1) {
                    return;
                }

                myChart.setOption(json.data);
            });
        });
        $(".btn-tab:first").trigger('click');
    });

    //日期控件
    $('.form-datetime').datetimepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd',
        startView: 'month',
        minView: 2,
        autoclose: true,
        todayBtn: true
    });

    $('#dateType').change(function () {
        if ($('#dateType').val() == "day") {
            $('.form-datetime').datetimepicker({
                language: 'zh-CN',
                format: 'yyyy-mm-dd',
                startView: 'month',
                minView: 2,
                autoclose: true,
                todayBtn: true
            });
        } else {
            $('.form-datetime').datetimepicker({
                language: 'zh-CN',
                format: 'yyyy-mm',
                startView: 'year',
                minView: 3,
                autoclose: true,
                todayBtn: false
            });
        }
    })
</script>
{/block}